<div class="row">
    <div class="col-md-6">
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-cogs"></i>基本类型
                </div>
            </div>
            <div class="portlet-body">
                <div class="alert alert-default">
                    <strong>你好!</strong> 有一些内容你可能需要知道。
                </div>
                <div class="alert alert-success">
                    <strong>太好了!</strong> 一切已准备就绪。
                </div>
                <div class="alert alert-info">
                    <strong>Hi!</strong> 这条消息可能需要你注意。
                </div>
                <div class="alert alert-warning">
                    <strong>注意!</strong> 看起来遇到一些问题。
                </div>
                <div class="alert alert-danger">
                    <strong>不好了!</strong> 确实遇到了问题，请立即处理吧。
                </div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-cogs"></i>带图标类型
                </div>
            </div>
            <div class="portlet-body">
                <div class="alert alert-default alert-icon">
                    <i class="fa fa-inbox"></i>
                    <div class="content"><strong>你好!</strong> 有一些内容你可能需要知道。</div>
                </div>
                <div class="alert alert-success alert-icon">
                    <i class="fa fa-check"></i>
                    <div class="content"><strong>太好了!</strong> 一切已准备就绪。</div>
                </div>
                <div class="alert alert-info alert-icon">
                    <i class="fa fa-info-circle"></i>
                    <div class="content"><strong>Hi!</strong> 这条消息可能需要你注意。</div>
                </div>
                <div class="alert alert-warning alert-icon">
                    <i class="fa fa-warning"></i>
                    <div class="content"><strong>注意!</strong> 看起来遇到一些问题。</div>
                </div>
                <div class="alert alert-danger alert-icon">
                    <i class="fa fa-times-circle"></i>
                    <div class="content"><strong>不好了!</strong> 确实遇到了问题，请立即处理吧。</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 ">
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-cogs"></i>带链接类型
                </div>
            </div>
            <div class="portlet-body">
                <div class="alert alert-icon alert-default ">
                    <i class="fa fa-inbox"></i>
                    <div class="content"><strong>你好!</strong> <a class="alert-link" href="###">有一些内容</a>你可能需要知道。</div>
                </div>
                <div class="alert alert-icon  alert-success">
                    <i class="fa fa-check"></i>
                    <div class="content"><strong>太好了!</strong> 一切已<a class="alert-link" href="###">准备就绪</a>。</div>
                </div>
                <div class="alert alert-icon alert-info">
                    <i class="fa fa-info-circle"></i>
                    <div class="content"><strong>Hi!</strong> 这条消息可能<a class="alert-link" href="###">需要你注意</a>。</div>
                </div>
                <div class="alert alert-icon alert-warning">
                    <i class="fa fa-warning"></i>
                    <div class="content"><strong>注意!</strong> 看起来遇到<a class="alert-link" href="###">一些问题</a>。</div>
                </div>
                <div class="alert alert-icon alert-danger">
                    <i class="fa fa-times-circle"></i>
                    <div class="content"><strong>不好了!</strong> 确实遇到了问题，请<a class="alert-link" href="###">立即处理</a>吧。</div>
                </div>
            </div>
        </div>
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-cogs"></i>带关闭图标类型
                </div>
            </div>
            <div class="portlet-body">
                <div class="alert alert-warning alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"><span aria-hidden="true">&times;</span></button>
                    <strong>注意!</strong> 看起来遇到一些问题。
                    <p>您可以点击右上角的 <i class='fa fa-remove'></i> 来关闭这条消息。</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default panel-widget">
            <div class="panel-body" style="background-color: #fff;padding: 10px ">
                <div class="mu-tabbable border-remove">
                    <ul class="nav nav-tabs ">
                        <li class="active"><a href="#tab_5_1" data-toggle="tab">Javascript</a>
                        </li>
                        <li><a href="#tab_5_2" data-toggle="tab">Html</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_5_1">
                            无
                        </div>
                        <div class="tab-pane" id="tab_5_2">
                            <pre class="prettyprint">
&lt;h4 class="header-dividing" &gt;基本静态类型&lt;/h4&gt;
&lt;div class="alert"&gt;...&lt;/div&gt;
&lt;div class="alert alert-danger"&gt;...&lt;/div&gt;
&lt;div class="alert alert-success"&gt;...&lt;/div&gt;
&lt;div class="alert alert-warning"&gt;...&lt;/div&gt;
&lt;div class="alert alert-info"&gt;...&lt;/div&gt;

&lt;h4 class="header-dividing" &gt;带图标类型&lt;/h4&gt;
&lt;div class="alert alert-success alert-icon"&gt;
  &lt;i class="fa fa-check"&gt;&lt;/i&gt;
  &lt;div class="content"&gt;...&lt;/div&gt;
&lt;/div&gt;


&lt;h4 class="header-dividing" &gt;带链接类型&lt;/h4&gt;
&lt;div class="alert alert-icon alert-danger"&gt;
   &lt;i class="fa fa-times-circle"&gt;&lt;/i&gt;
   &lt;div class="content"&gt;...&lt;a class="alert-link" href="###"&gt;....&lt;/div&gt;
&lt;/div&gt;

&lt;h4 class="header-dividing" &gt;带关闭图标类型&lt;/h4&gt;
&lt;div class="alert alert-warning alert-dismissable"&gt;
  &lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;
  &lt;p&gt;....&lt;/p&gt;
&lt;/div&gt;
              </pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
window.prettyPrint();
</script>
